<template>
  <div class="lgoinPage">
    <div class="login">
      <div class="center add">
        <!-- <img src="../../assets/img.png" alt="" /> -->
      </div>
      <div class="center  login_box">
         <div class="from_box">
            <Login></Login>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
import Login from "./login.vue";
import Reset from "./Reset.vue";
export default {
  data() {
    return {
      isShow: false,
      num: 0,
      tabList: [
        {
          name: "登录",
        },
        {
          name: "重置密码",
        },
      ],
    };
  },
  methods: {
    changeLogin(index) {
      if (index == 0) {
        this.isShow = false;
        this.num = index;
      } else {
        this.isShow = true;
        this.num = index;
      }
    },
  },
  components: {
    Login,
    Reset,
  },
};
</script>

<style lang="scss" scoped>
.fontSize {
  font-weight: 700;
  color: #000;
}

@import url(../../components/style/index.scss);

.lgoinPage {
  position: relative;
  width: 100%;
  height: 100%;
  // background-image: linear-gradient(to right, #ff792c, #ff9337);
  background: url(../../assets/login_bg.jpg);
  background-repeat: no-repeat;
  .login {
    box-shadow: 11px 8px 28px -4px #b6b8bc;
    width: 1200px;
    height: 600px;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    padding-left: 68px;
    box-sizing: border-box;
    position: absolute;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

     .center {
    
      display: inline-block;
      height: 100%;
      margin-bottom: -90px;

      img {
        width: 100%;
      }
      &.login_box {
        width: 40%;
      
         .from_box {
          width: 60%;
          margin-left: 20%;
         }
         

      }
     }
     .add {
      background: url('../../assets/img.png') center;
      background-size: 100%;
      background-repeat: no-repeat;
        width: 60%;
     }
  }
}
.from {
  margin-top: 100px;
  height: 338px;
  position: relative;
}
input {
  outline: none !important;
}
::v-deep .el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 0;
  // transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  outline: none !important;
  width: 100%;
  border: none;
  border-bottom: 1px solid #dcdfe6;
}
.from_img {
  position: absolute;
  top: 10px;
  height: 22px;
  width: 170px;
  // background-color: #de5037;
  text-align: center;
  line-height: 170px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
